<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div class="container">
  <img id="img1" src="resources/cake.png">
</div>

<script>
test(function(t) {
    var axImg1 = accessibilityController.accessibleElementById("img1");
    assert_equals(axImg1.name, "");
}, "img element without alt");
</script>

<div class="container">
  <img id="img2" title="img2-title" src="resources/cake.png">
</div>

<script>
test(function(t) {
    var axImg2 = accessibilityController.accessibleElementById("img2");
    assert_equals(axImg2.name, "img2-title");
    assert_equals(axImg2.nameFrom, "title");
}, "img element without alt, with title");
</script>

<div class="container">
  <img id="img3" title="img3-title" alt="img3-alt" src="resources/cake.png">
</div>

<script>
test(function(t) {
    var axImg3 = accessibilityController.accessibleElementById("img3");
    assert_equals(axImg3.name, "img3-alt");
    assert_equals(axImg3.nameFrom, "attribute");
}, "img element with title and alt img3");
</script>

<div class="container">
  <img id="img4" title="img4-title" alt="img4-alt" aria-label="img4-aria-label" src="resources/cake.png">
</div>

<script>
test(function(t) {
    var axImg4 = accessibilityController.accessibleElementById("img4");
    assert_equals(axImg4.name, "img4-aria-label");
    assert_equals(axImg4.nameFrom, "attribute");
}, "img element with title and alt img4");
</script>

<div class="container">
  <img id="img5" title="img5-title" alt="img5-alt" aria-label="img5-aria-label" aria-labelledby="labelledby5" src="resources/cake.png">
  <span hidden="true" id="labelledby5">img5-aria-labelledby</span>
</div>

<script>
test(function(t) {
    var axImg5 = accessibilityController.accessibleElementById("img5");
    assert_equals(axImg5.name, "img5-aria-labelledby");
    assert_equals(axImg5.nameFrom, "relatedElement");
}, "img element with title and alt img5");
</script>
